<template>
  <div class="content">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div style="min-height: 100vh;" v-show="isInit">
        <van-cell-group title="好友列表">
          <div class="friends" v-for="item in friends_list" :key="item.user_id">
            <van-cell>
              <template #icon>
                <div class="icon">
                  <van-image :src="item.avatar" width="60" height="60" round/>
                </div>
              </template>
              <template #title>
                <div class="title">
                  <h3>{{item.nick_name}}</h3>
                </div>
              </template>
              <template #right-icon>
                <div class="right-icon">
                  <van-button size="small" @click="deleteFriend(item.user_id)">删除</van-button>
                </div>
              </template>
            </van-cell>
          </div>
          <div class="no-content" v-show="friends_list.length===0">
            <span>暂时没有好友</span>
          </div>
        </van-cell-group>

      </div>
    </van-pull-refresh>
    <van-loading type="spinner" v-show="!isInit" color="#1989fa" />
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "Friends",
  data(){
    return{
      friends_list:[],
      isLoading:false,
      isInit:false
    }
  },
  methods:{
    onRefresh(){
      this.load()
    },
    load(){
      let that=this
      api.getFriends().then(res=>{
        that.friends_list=res
        that.isLoading=false
        that.isInit=true
      })
    },
    deleteFriend(user_id){
      let that=this
      MiniApp.showModal({
        title:"提示",
        content:"确认删除？",
        showCancel:true,
        cancelText:"取消",
        confirmText:"确认",
        success(res) {
          if (res.confirm){
            api.deleteFriend().then(res=>{
              if (res){
                let index=that.friends_list.findIndex(item=>item.user_id===user_id)
                let msg=""
                index!==-1&&that.friends_list.splice(index,1)
                index===-1?msg="删除目标不存在":msg="删除成功"
                MiniApp.showToast({title:msg})
              }
            })
          }
        }
      })
    }
  },
  mounted() {
    this.load()
  }

}
</script>

<style scoped>
.icon{
  margin-right: 20px;
}
.title{
  padding-top: 30px;
  vertical-align: center;
}
.friends{
  margin-bottom: 20px;
}
</style>